<template>
  <div>
    <div class="myRow">
      <el-row :gutter="10">
        <el-col :span="8">
          <el-card>
            <div class="chartBox">
              <div
                id="chart4"
                :style="`width: ${width}%;height: ${height}%;zoom:${zoom};transform:scale(${
                  1 / zoom
                });`"
              ></div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="16">
          <el-card>
            <div class="chartBox">
              <div
                id="chart5"
                :style="`width: ${width}%;height: ${height}%;zoom:${zoom};transform:scale(${
                  1 / zoom
                });`"
              ></div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div class="myRow">
      <el-card>
        <div class="chartBox">
          <div
            id="chart6"
            :style="`width: ${width}%;height: ${height}%;zoom:${zoom};transform:scale(${
              1 / zoom
            });`"
          ></div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
export default {
  name: "",
  components: {},
  props: {
    zoom: {
      type: Number,
      default: 1,
    },
    width: {
      type: Number,
      default: 0,
    },
    height: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      chart4: null,
      chart5: null,
      chart6: null,
      color: [],
      searchParams: {},
    };
  },
  watch: {},
  computed: {},
  mounted() {
    this.init();
  },
  methods: {
    init(searchParams) {
      let res1 = [];

      let res2 = [
        {
          pei: [
            {
              name: "不合格",
              value: "5",
            },
            {
              name: "合格",
              value: "68",
            },
          ],
        },
        {
          lengent: [
            "2019-10-28",
            "2019-10-29",
            "2019-10-30",
            "2019-11-09",
            "2020-04-29",
            "2020-05-30",
            "2020-05-31",
            "2020-06-01",
            "2020-06-02",
            "2020-06-03",
            "2020-06-04",
            "2020-06-05",
            "2020-06-06",
            "2020-06-08",
            "2020-06-21",
            "2020-07-06",
            "2020-07-07",
            "2020-07-09",
            "2020-07-10",
            "2020-07-11",
            "2020-07-13",
            "2020-07-15",
            "2020-07-17",
            "2020-07-20",
            "2020-07-26",
            "2020-07-29",
            "2020-08-19",
            "2020-08-26",
            "2020-09-06",
          ],
          noq: [
            1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 1, 0, 0, 1, 0,
          ],
          al: [
            2, 1, 1, 1, 2, 1, 2, 2, 1, 7, 2, 5, 3, 1, 2, 1, 2, 6, 5, 2, 3, 2, 2,
            2, 5, 2, 1, 6, 1,
          ],
        },
        {
          min: [
            60.0, 35.0, 60.0, 60.0, 60.0, 35.0, 35.0, 35.0, 60.0, 60.0, 60.0,
            60.0, 60.0, 35.0, 60.0, 60.0, 35.0, 35.0, 35.0, 35.0, 60.0, 60.0,
            60.0, 60.0, 60.0, 60.0, 40.0, 60.0, 60.0, 35.0, 35.0, 40.0, 40.0,
            40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0,
            40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0,
            40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0,
            40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0,
          ],
          max: [
            80.0, 65.0, 80.0, 80.0, 80.0, 65.0, 65.0, 65.0, 80.0, 80.0, 80.0,
            80.0, 80.0, 65.0, 80.0, 80.0, 65.0, 65.0, 65.0, 65.0, 80.0, 80.0,
            80.0, 80.0, 80.0, 80.0, 60.0, 80.0, 80.0, 65.0, 65.0, 60.0, 60.0,
            60.0, 60.0, 60.0, 60.0, 60.0, 60.0, 60.0, 60.0, 60.0, 60.0, 60.0,
            60.0, 60.0, 60.0, 60.0, 60.0, 60.0, 60.0, 60.0, 60.0, 60.0, 60.0,
            60.0, 60.0, 60.0, 60.0, 60.0, 60.0, 60.0, 60.0, 60.0, 60.0, 60.0,
            60.0, 60.0, 60.0, 60.0, 60.0, 60.0, 60.0,
          ],
          name: [
            "70#",
            "MAC改性沥青II",
            "70#",
            "70#",
            "70#",
            "MAC改性沥青II",
            "MAC改性沥青II",
            "MAC改性沥青II",
            "70#",
            "70#",
            "70#",
            "70#",
            "70#",
            "MAC改性沥青II",
            "70#",
            "70#",
            "MAC改性沥青II",
            "MAC改性沥青II",
            "MAC改性沥青II",
            "MAC改性沥青II",
            "70#",
            "70#",
            "70#",
            "70#",
            "70#",
            "70#",
            "SBS改性沥青I-D",
            "70#",
            "70#",
            "MAC改性沥青II",
            "MAC改性沥青II",
            "SBS改性沥青I-D",
            "SBS改性沥青I-D",
            "SBS改性沥青I-D",
            "SBS改性沥青I-D",
            "SBS改性沥青I-D",
            "SBS改性沥青I-D",
            "SBS改性沥青I-D",
            "SBS改性沥青I-D",
            "SBS改性沥青I-D",
            "SBS改性沥青I-D",
            "SBS改性沥青I-D",
            "SBS改性沥青I-D",
            "SBS改性沥青I-D",
            "SBS改性沥青I-D",
            "SBS改性沥青I-D",
            "SBS改性沥青I-D",
            "SBS改性沥青I-D",
            "SBS改性沥青I-D",
            "SBS改性沥青I-D",
            "SBS改性沥青I-D",
            "SBS改性沥青I-D",
            "SBS改性沥青I-D",
            "SBS改性沥青I-D",
            "SBS改性沥青I-D",
            "SBS改性沥青I-D",
            "SBS改性沥青I-D",
            "SBS改性沥青I-D",
            "SBS改性沥青I-D",
            "SBS改性沥青I-D",
            "SBS改性沥青I-D",
            "SBS改性沥青I-D",
            "SBS改性沥青I-D",
            "SBS改性沥青I-D",
            "SBS改性沥青I-D",
            "SBS改性沥青I-D",
            "SBS改性沥青I-D",
            "SBS改性沥青I-D",
            "SBS改性沥青I-D",
            "SBS改性沥青I-D",
            "SBS改性沥青I-D",
            "SBS改性沥青I-D",
            "SBS改性沥青I-D",
          ],
          averager: [
            75.9, 34.4, 62.8, 63.9, 67.1, 41.0, 37.5, 38.2, 62.9, 68.0, 71.7,
            72.9, 69.7, 46.7, 72.4, 74.5, 49.2, 52.4, 54.0, 43.2, 63.5, 67.9,
            62.7, 72.0, 62.4, 70.5, 46.8, 62.1, 65.6, 56.2, 42.8, 66.5, 69.4,
            47.9, 51.8, 52.7, 52.7, 53.1, 51.4, 52.6, 58.8, 52.0, 51.4, 48.9,
            49.7, 54.9, 50.4, 47.9, 50.8, 51.3, 53.4, 49.8, 49.0, 51.1, 51.9,
            48.3, 47.8, 50.2, 67.7, 53.0, 46.7, 49.0, 48.1, 52.1, 50.8, 56.9,
            48.9, 49.9, 53.5, 71.2, 50.3, 49.3, 56.0,
          ],
          yaxis: [
            "2019-10-28 12:37:46",
            "2019-10-28 05:04:42",
            "2019-10-29 09:58:39",
            "2019-10-30 03:03:56",
            "2019-11-09 11:13:25",
            "2020-04-29 02:42:13",
            "2020-04-29 02:32:07",
            "2020-05-30 09:19:27",
            "2020-05-31 06:13:26",
            "2020-05-31 06:08:03",
            "2020-06-01 03:33:34",
            "2020-06-01 10:41:28",
            "2020-06-02 11:04:34",
            "2020-06-03 07:32:24",
            "2020-06-03 02:14:02",
            "2020-06-03 02:10:51",
            "2020-06-03 10:57:31",
            "2020-06-03 04:05:04",
            "2020-06-03 08:12:48",
            "2020-06-03 07:38:14",
            "2020-06-04 02:52:02",
            "2020-06-04 02:54:40",
            "2020-06-05 03:40:34",
            "2020-06-05 06:26:50",
            "2020-06-05 03:37:21",
            "2020-06-05 03:16:16",
            "2020-06-05 09:14:01",
            "2020-06-06 08:21:52",
            "2020-06-06 07:05:17",
            "2020-06-06 02:02:22",
            "2020-06-08 09:44:03",
            "2020-06-21 08:59:53",
            "2020-06-21 09:07:09",
            "2020-07-06 02:24:14",
            "2020-07-07 03:03:53",
            "2020-07-07 03:38:01",
            "2020-07-09 09:54:29",
            "2020-07-09 10:14:44",
            "2020-07-09 12:43:07",
            "2020-07-09 01:30:24",
            "2020-07-09 02:02:27",
            "2020-07-09 11:28:43",
            "2020-07-10 11:11:19",
            "2020-07-10 04:23:33",
            "2020-07-10 07:51:11",
            "2020-07-10 03:37:12",
            "2020-07-10 05:35:21",
            "2020-07-11 07:54:09",
            "2020-07-11 08:27:42",
            "2020-07-13 01:35:20",
            "2020-07-13 06:19:16",
            "2020-07-13 05:41:30",
            "2020-07-15 09:12:09",
            "2020-07-15 02:10:45",
            "2020-07-17 08:46:44",
            "2020-07-17 07:44:53",
            "2020-07-20 01:44:58",
            "2020-07-20 06:00:50",
            "2020-07-26 12:22:29",
            "2020-07-26 12:22:29",
            "2020-07-26 12:22:29",
            "2020-07-26 12:22:29",
            "2020-07-26 12:22:29",
            "2020-07-29 11:13:04",
            "2020-07-29 11:13:04",
            "2020-08-19 07:48:27",
            "2020-08-26 03:06:24",
            "2020-08-26 03:06:24",
            "2020-08-26 03:06:24",
            "2020-08-26 03:06:24",
            "2020-08-26 03:06:24",
            "2020-08-26 03:06:24",
            "2020-09-06 03:06:18",
          ],
        },
      ];
      let res3 = [];

      // this.searchParams = searchParams;
      this.myChart4 = echarts.init(document.getElementById("chart4"));
      this.myChart5 = echarts.init(document.getElementById("chart5"));
      this.myChart6 = echarts.init(document.getElementById("chart6"));

      // api.dataStatisticsByPenetration(this.searchParams).then((res) => {
      //   if (res) {
      this.createMyChart4(res2);
      this.createMyChart5(res2);
      this.createMyChart6(res2);
      // }

      // });
    },
    resize() {
      this.$nextTick(() => {
        if (null != this.myChart4) {
          this.myChart4.resize();
        }
        if (null != this.myChart5) {
          this.myChart5.resize();
        }
        if (null != this.myChart6) {
          this.myChart6.resize();
        }
      });
    },
    createMyChart4(data) {
      if (data[0].pei[0] && data[0].pei[0].name == "合格") {
        this.color = ["#4CCB72", "#F3637C"];
      } else {
        this.color = ["#F3637C", "#4CCB72"];
      }

      this.myChart4.clear();
      this.myChart4.showLoading();
      this.myChart4.setOption({
        color: this.color,
        title: {
          text: "针入度试验合格占比",
          left: "left",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "horizontal",
          left: "center",
          top: 300,
          data: ["合格", "不合格"],
          formatter: function (name) {
            let target;
            for (let i = 0; i < data[0].pei.length; i++) {
              if (data[0].pei[i].name === name) {
                target = data[0].pei[i].value;
              }
            }
            let arr = [name + ":" + target];
            return arr.join("\n");
          },
        },

        grid: {
          top: 40,
          bottom: 60,
          left: 80,
          right: 80,
        },
        series: [
          {
            // name: 'Access From',
            type: "pie",
            radius: "50%",
            data: data[0].pei,
            label: {
              normal: {
                formatter: " {b}:{c}   ", //图形外文字上下显示
                borderWidth: 20,
                borderRadius: 4,
              },
            },
          },
        ],
      });
      this.myChart4.resize();
      this.myChart4.hideLoading();
    },
    createMyChart5(data) {
      this.myChart5.clear();
      this.myChart5.showLoading();
      this.myChart5.setOption({
        color: ["#409EFF", "#F3637C"],
        title: {
          text: "针入度试验统计",
          left: "left",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          left: "center",
        },
        xAxis: {
          name: "日期",
          type: "category",
          data: data[1].lengent,
          nameTextStyle: {
            padding: [60, 0, 0, -25],
          },
        },

        yAxis: {
          type: "value",
          name: "试验次数",
        },
        grid: {
          top: 60,
          bottom: 60,
          left: 80,
          right: 80,
        },
        series: [
          {
            name: "试验次数",
            data: data[1].al,
            type: "line",
          },
          {
            name: "不合格次数",
            data: data[1].noq,
            type: "line",
          },
        ],
      });
      this.myChart5.resize();
      this.myChart5.hideLoading();
    },
    createMyChart6(data) {
      let Arr = [];
      for (let index = 0; index < data[2].yaxis.length; index++) {
        if (data[2].yaxis[index] == "null") {
          data[2].yaxis[index] = "";
        }
        Arr.push(data[2].yaxis[index]);
      }
      if (data[2].max.length == 0) {
        this.max = {
          type: "line", //增加type字段
        };
      } else {
        this.max = {
          name: "上限",
          type: "line", //增加type字段
          data: data[2].max,
          itemStyle: {
            normal: {
              lineStyle: {
                width: 2,
                type: "dotted", //'dotted'虚线 'solid'
              },
            },
          },
        };
      }
      if (data[2].min.length == 0) {
        this.min = {
          type: "line", //增加type字段
        };
      } else {
        this.min = {
          name: "下限",
          type: "line", //增加type字段
          data: data[2].min,
          itemStyle: {
            normal: {
              lineStyle: {
                width: 2,
                type: "dotted", //'dotted'虚线 'solid'
              },
            },
          },
        };
      }
      this.myChart6.clear();
      this.myChart6.showLoading();
      this.myChart6.setOption({
        color: ["#339ca8", "#FF9F5F9F", "#FF00FFFF"],
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            var res = "<pre>";
            res += params[0].name + "</br>";
            res += data[2].name[params[0].dataIndex];
            res += "</br>";
            for (var i = 0; i < params.length; i++) {
              res +=
                '<span style="display:inline-block;margin-right:5px;border-radius:10px;' +
                "width:10px;height:10px;background-color:" +
                params[i].color +
                '"></span>' +
                params[i].seriesName +
                "" +
                ":" +
                params[i].value +
                "</span>\n";
            }
            res += "</pre>";
            return res;
          },
        },
        title: {
          text: "针入度试验数据",
          left: "left",
        },
        grid: {
          top: 60,
          bottom: 80,
          left: 80,
          right: 80,
        },
        legend: {
          left: "center",
        },
        xAxis: {
          type: "category",
          name: "日期",
          nameTextStyle: {
            padding: [60, 0, 0, -25],
          },
          data: Arr,
        },
        yAxis: {
          type: "value",
          name: "试验值",
        },
        dataZoom: [
          {
            type: "slider",
            labelFormatter: (value) => {
              return "";
            },
          },
        ],
        series: [
          this.max,
          {
            name: "平均值",
            type: "line",
            data: data[2].averager,
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 2,
                  type: "solid", //'dotted'虚线 'solid'
                },
              },
            },
          },
          this.min,
        ],
      });
      this.myChart6.resize();
      this.myChart6.hideLoading();
    },
  },
  created() {},
};
</script>
<style scoped>
.myRow {
  margin-top: 10px;
}
.chartBox {
  height: 350px;
  width: 100%;
}
#chart4,
#chart5,
#chart6 {
  transform-origin: 0 0;
}
</style>
